﻿@{
    Layout = null;
}
<style type="text/css">

    .field-validation-error
    {
        position: absolute;
        display: block;
    }
    
    * html .field-validation-error { position: relative; }
    *+html .field-validation-error { position: relative; }
    
    .field-validation-error span
    {
        position: absolute;
        white-space: nowrap;
        color: red;
        padding: 17px 5px 3px;
        background: transparent url('@Url.Content("~/Content/Common/validation-error-message.png") ') no-repeat 0 0;
    }
    
    /* in-form editing */
    .t-edit-form-container
    {
        width: 350px;
        margin: 1em;
    }
    
    .t-edit-form-container .editor-label,
    .t-edit-form-container .editor-field
    {
        padding-bottom: 1em;
        float: left;
    }
    
    .t-edit-form-container .editor-label
    {
        width: 30%;
        text-align: right;
        padding-right: 3%;
        clear: left;
    }
    
    .t-edit-form-container .editor-field
    {
        width: 60%;
    }
</style>
@{ Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text> $('.t-button').live('mouseenter',
    $.telerik.buttonHover) .live('mouseleave', $.telerik.buttonLeave);
    </text>); 
}
<script type="text/javascript">

    function ShowEditProSpecification(id) {
        var pid = $('#product_id').val();
        var windowElement = $('#ProSpecPopupContainer');
        windowElement.data('tWindow').center().open();
        windowElement.data('tWindow').ajaxRequest("/admin/Product/AddUpdateProductSpecificationAttributeOption?psid=" + id + "&pid=" + pid);
    }
    function ShowAddSpecificationPopup() {
        var pid = $('#product_id').val();
        var windowElement = $('#ProSpecPopupContainer');
        windowElement.data('tWindow').center().open();
        windowElement.data('tWindow').ajaxRequest("/admin/Product/AddUpdateProductSpecificationAttributeOption?pid=" + pid);
    }
    function resetAddUpdateProductSpecificationOption() {
        var windowElement = $('#ProSpecPopupContainer');
        windowElement.data('tWindow').close();
        var pid = $('#product_id').val();
        var params = {
            productId:pid
        };

        var grid = $('#ResultsSpecificationOptionForProduct').data('tGrid');
        grid.rebind(params);

    }
</script>
<h2></h2>
 <div class="form-actions">
            <button type="button" class="t-button t-state-default"  onclick="javascript:ShowAddSpecificationPopup()">
                Thêm mới</button>
        </div>  
<div>
    @(Html.Telerik().Grid<Sealight.UI.WebUI.Models.ProductSpecificationAttributeViewModel>().Name("ResultsSpecificationOptionForProduct")
             .DataKeys(keys =>
             {
                 keys.Add(o => o.ID);               
             })
                     //.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))

.Columns(columns =>
{
    columns.Bound(o => o.SpecificationAttributeOptionID).Hidden();   
    columns.Bound(o => o.OptionName).Title("Tên thuộc tính chọn");
    columns.Bound(o => o.ShowOnProductPage).Title("Hiển thị trang sản phẩm");
    columns.Bound(o => o.AllowFiltering).Width(100).Title("Cho phép lọc");  
    columns.Bound(o => o.DisplayOrder).Width(50).Title("Thứ tự");
    columns.Bound(o => o.ID).ClientTemplate("<input type='button' value='Edit' class='t-button t-state-default' onclick=\"return ShowEditProSpecification('<#=ID#>');\" />").Title("").Width(100);
    columns.Command(commands =>
    {
        //commands.Edit().ButtonType(GridButtonType.Text);
        commands.Delete().ButtonType(GridButtonType.Text);
    }).Width(180).Title("");

}).DataBinding(dataBinding =>dataBinding.Ajax().Select("_SpecificationOptionForProductSelectAjaxEditing", "Product", new { productId = ViewData["productId"] })
                                //.Insert("_SpecificationOptionForProductInsertAjaxEditing", "Product", new { productId = ViewData["productId"] })
                                        //.Update("_SpecificationOptionForProductSaveAjaxEditing", "Product", new { productId = ViewData["productId"] })
                                        .Delete("_SpecificationOptionForProductDeleteAjaxEditing", "Product", new { productId = ViewData["productId"] }))
        .Scrollable(scrolling => scrolling.Enabled(true))
        .Sortable(sorting => sorting.Enabled(true))
        .Pageable(paging => paging.Enabled(true))
                //.Editable(editing => editing.Mode(GridEditMode.PopUp))
        )
</div>


@{ Html.Telerik().Window()
        .Name("ProSpecPopupContainer")
        .Title("Thêm Sửa Option Cho Sản phẩm")
        .Width(500)
        .Height(250)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
}